<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>ele实时编辑器</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<script src="jquery.min.js"></script>

	<link rel="stylesheet" href="./element/element.css">
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="./element/element.js"></script>
	<script type="text/javascript" src="request.js"></script>
	<!-- import CSS -->
	<link rel="stylesheet" href="index.css">
	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->

	<style>
		.setting {
			position: fixed;
			right: 10%;
			top: 0px;
		}

		.hot-use {
			margin-right: 5%;
			cursor: pointer;
		}
	</style>

</head>

<body>

	<div id="es6">
		<el-row>
			<el-button v-for="(item,index) in section_list" round @click="toggel_section(item)">{{item.name}}
			</el-button>

		</el-row>
		<div class="code">
			<textarea id="code_container" cols="100" rows="30" v-model="code"></textarea>
		</div>

		<div class="setting">
			<el-row>
				<el-input v-model="handler_value_name" placeholder="填写操作对象名称" clearable>

			</el-row>
			<el-row>
				<span class="hot-use" v-for="(item,index) in hot_use_list" @click="assign_value(item)">
					<a>{{item}}</a>

				</span>
			</el-row>
			<el-button v-for="(item,index) in setting_list" round @mouseover.native="toggel_hot_use(item)"
				@click="add_code(item)">{{item.name}}
			</el-button>
		</div>

		<div class="code-pools" style="display: none;">

			<template v-if="cur_section=='字符串'">
				<div id="_模板字符串">
					${#}
				</div>
				<div id="_模板字符串嵌套" >
					const data = [
						{ first: '<Jane>', last: 'Bond' },
						{ first: 'Lars', last: '<Croft>' },
					];

					const tmpl = addrs => `
					<table>
					${addrs.map(addr => `
						<tr><td>${addr.first}</td></tr>
						<tr><td>${addr.last}</td></tr>
					`).join('')}
					</table>
					`;
					console.log(tmpl(data));
				</div>
				<div id="_模板字符串本身">
					let func = (name) => `Hello ${name}!`;
					func('Jack') // "Hello Jack!"
				</div>


				<div id="_标签模板tag">
						let total = 30;
						let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
						
						//方法1
						function passthru(literals) {
						  let result = '';
						  let i = 0;
						
						  while (i < literals.length) {
							result += literals[i++];
							if (i < arguments.length) {
							  result += arguments[i];
							}
						  }
						
						  return result;
						}
						//方法2
						function passthru(literals, ...values) {
							let output = "";
							let index;
							for (index = 0; index < literals.length; index++) {
								debugger;
							  output += literals[index] + (!!values[index]?values[index]:'');
							}
					
							return output;
						  }
						
						msg // "The total is 30 (31.5 with tax)"


						//过滤 HTML 字符串，防止用户输入恶意内容
						let message =
							SaferHTML`<p>${sender} has sent you a message.</p>`;

							function SaferHTML(templateData) {
							let s = templateData[0];
							for (let i = 1; i < arguments.length; i++) {
								let arg = String(arguments[i]);

								// Escape special characters in the substitution.
								s += arg.replace(/&/g, "&amp;")
										.replace(/</g, "&lt;")
										.replace(/>/g, "&gt;");

								// Don't escape special characters in the template.
								s += templateData[i];
							}
							return s;
							}
							let sender = '<script>alert("abc")</script>'; // 恶意代码
							let message = SaferHTML`<p>${sender} has sent you a message.</p>`;

							//多语言转换（国际化处理）
							i18n`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
							// "欢迎访问xxx，您是第xxxx位访问者！"

							//raw属性,转义字符串
							tag`First line\nSecond line`

							function tag(strings) {
							console.log(strings.raw[0]);
							// strings.raw[0] 为 "First line\\nSecond line"
							// 打印输出 "First line\nSecond line"
							}

				</div>


				<div id="_indexOf加强">
						let s = 'Hello world!';

					s.startsWith('Hello') // true
					s.endsWith('!') // true
					s.includes('o') // true

					s.startsWith('world', 6) // true
					s.endsWith('Hello', 5) // true
					s.includes('Hello', 6) // false
					</div>

					<div id="_repeat()">
							'x'.repeat(3) // "xxx"
							'hello'.repeat(2) // "hellohello"
							'na'.repeat(0) // ""

							'na'.repeat(2.9) // "nana"

							'na'.repeat('3') // "nanana"
						</div>

			</template>

			<template v-if="cur_section=='数值'">
				<div id="isFinite">
					if(Number.isFinite(#)){

					}
				</div>
				<div id="isNaN">
					if(Number.isNaN(#)){

					}
				</div>
			</template>
		</div>
	</div>

</body>


</html>
<script src="es6.js"></script>